<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ajax请求</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">

</head>
<body>

<div id="app">
    <p>
        本页面内容是：<span>{{msg}}</span>
    </p>
    <input @click="testAjax()" type="button" value="测试ajax"/> <br>
    <input @click="testAjax2()" type="button" value="测试ajax——requestbody——单个字面量"/> <br>
    <input @click="testAjax3()" type="button" value="测试ajax——requestbody——对象"/> <br>
    <input @click="testAjax4()" type="button" value="测试ajax——responsebody——返回一个消息"/> <br>
    <a class="layui-btn layui-btn-warm" th:href="@{/axios/resp}" type="button">点击响应数据</a> <br>
    <input @click="testAjax5()" type="button" value="测试ajax---responsebody--返回一个JSON信息"/> <br>
</div>


<!--js-->
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/vue/vue.js}"></script>
<script th:src="@{/static/axios/axios.min.js}"></script>
<script th:src="@{/static/jquery/jquery.js}"></script>
<script src="../../static/vue/vue.js"></script>

<!--vue的相关代码-->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "学习Axios（ajax)",
            appcontext: "/sm2"
        },
        // 方法
        methods: {
            testAjax() {
                axios({
                    method: 'post',
                    url: this.appcontext + '/axios/old',
                }).then(res => {
                    console.log(res.data)
                })
            },
            testAjax2() {
                axios.post(
                    this.appcontext + '/axios/mvc',
                    {getQD: "我是前端的body数据"}).then((res) => {
                    console.log(res.data)
                })
            },
            testAjax3() {
                axios.post(
                    this.appcontext + '/axios/mvc2',
                    {
                        username: "刘备",
                        password: "11111",
                        age:22,
                        gender:"男"
                    }).then((res) => {
                    console.log(res.data)
                })
            },
            testAjax4() {
                axios.get(this.appcontext + '/axios/resp',).then((res) => {
                    console.log(res.data)
                })
            },
            testAjax5(){
                axios.get(this.appcontext + '/axios/obj').then((res)=>{
                    console.log(res)
                })
            }

        }
    })

</script>

</body>
</html>